<template>
	<view id="recordFree">
		<view class="toBarTitle">
			<view class="title">切换申请费用</view>
			<view class="toBarBtm">
				<text class="left">本月</text>
				<text class="right">￥{{toBarTitle.riAccount}}</text>
			</view>
		</view>
		<view class="list">
			<uni-grid v-for="(item, index) in listItem" :key="index"
				class="listItem" :column="4" :show-border="false" :square="false">
				<uni-grid-item class="checkItem">
					<evan-checkbox :v-model="item.checked"></evan-checkbox>
				</uni-grid-item>
				<uni-grid-item  class="icon">
					<view class="iconBox" :style="{backgroundColor: item.iconbg}">
						<icon-svg :icon-class="item.iconClass" /></span>
					</view>
				</uni-grid-item>
				<uni-grid-item class="content">
					<view>
						<view>
							<text class="conTitle">{{item.conTitle}}</text>
							<text class="conSubTitle">{{item.conSubTitle}}</text>
						</view>
						<view>{{item.date}}</view>
						<view>{{item.cause}}</view>
						<text>{{item.causeBy}}</text>
					</view>
				</uni-grid-item>
				<uni-grid-item class="price">
					<text>CNY{{item.price}}</text>
				</uni-grid-item>
			</uni-grid>
		</view>
		<!-- 底部合计： -->
		<view class="btmBarAccount">
			<label>
				<evan-checkbox :v-model="btmBarAccount.checked">全选 
					<text class="account">共计<text>￥{{btmBarAccount.account}}</text></text>
				</evan-checkbox>
			</label>
		</view>
		<!-- <cmdBottomNav class="btmBar" :list="btmBarList" style="height:90rpx;line-height: 90rpx;"/> -->
		<view class="btmBarNav">
			<uni-grid :column="4" :show-border="false"  :square="false">
				<uni-grid-item>
					<text class="text">...</text>
				</uni-grid-item>
				<uni-grid-item>
					<text @click="handleBaoXiao" class="text">发起报销</text>
				</uni-grid-item>
				<uni-grid-item>
					<text @click="handleImport" class="text">导入</text>
				</uni-grid-item>
				<uni-grid-item>
					<text @click="handleRecordFree" class="text">记费用</text>
				</uni-grid-item>
			</uni-grid>
		</view>
		<uni-popup ref="popup" type="bottom">
			<view class="popupCon">
				<view v-for="(item,index) in popupData" :key="index" 
					class="popupList">
					<icon-svg class="icon" :icon-class="item.iconClass" />
					<text class="text">{{item.text}}</text>
				</view>
				<view class="popupClose" @click="handleClose">
					<icon-svg class="close" icon-class="shanchu"></icon-svg>
					<text>取消</text>
				</view>
			</view>
		</uni-popup>
	</view>
</template>

<script>
	import evanCheckbox from "@/components/evan-checkbox/evan-checkbox.vue"
	import cmdBottomNav from "@/components/cmd-bottom-nav/cmd-bottom-nav.vue"
	export default {
		components: {
			cmdBottomNav,
			evanCheckbox
		},
		data() {
			return {
				toBarTitle: {
					riAccount: 25897.00
				},
				listItem: [
					{
						checked: '',
						iconClass: 'feiji1',
						conTitle: '办公费',
						conSubTitle: '（COST30）',
						iconbg: '#F8A41D',
						date: '2020-12-29',
						cause: '消费是由：',
						causeBy: '无',
						price: '1,999.00'
					},
					{
						checked: '',
						iconClass: 'canyin',
						conTitle: '办公费',
						conSubTitle: '（COST30）',
						iconbg: '#F48FB1',
						date: '2020-12-29',
						cause: '消费是由：',
						causeBy: '无',
						price: '1,999.00'
					},
					{
						checked: '',
						iconClass: 'jiudian',
						conTitle: '办公费',
						conSubTitle: '（COST30）',
						iconbg: '#B39DDB',
						date: '2020-12-29',
						cause: '消费是由：',
						causeBy: '无',
						price: '1,999.00'
					}
				],
				btmBarAccount: {
					checked: false,
					account: 0.00
				},
				btmBarList: [
					{
						"pagePath": "/pages/tabbar/home/home",
						"text": "...", 
					},
					{
						"pagePath": "/pages/add/handInputBill/handInputBill",
						"text": "发起报销", 
					},
					{
						"pagePath": "/pages/add/verifyNum/verifyNum",
						"text": "导入", 
					},
					{
						"pagePath": "/pages/add/curRecod/curRecod",
						"text": "记费用", 
					}
				],
				popupData: [
					{
						iconClass: 'saoyisao',
						text: '扫描发票'
					},
					{
						iconClass: 'jilu',
						text: '手录发票'
					},
					{
						iconClass: 'weixin',
						text: '微信发票'
					}
				]
			}
		},
		methods: {
			handleBaoXiao() {
				uni.navigateTo({
					url: 'lauchAccount/lauchAccount'
				})
			},
			handleImport() {
				this.$refs.popup.open()
			},
			handleClose() {
				this.$refs.popup.close()
			},
			handleRecordFree() {
				uni.navigateTo({
					url: 'recordFree/recordFree'
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	@import "@/pages/add/add.scss";
	#recordFree{
		background-color: #FFFFFF;
		box-sizing: border-box;
		padding: 0 15px 0 15px;
		.toBarTitle{
			width: 100%;
			height: auto;
			.title{
				height: 80rpx;
				line-height: 80rpx;
				color: #333;
				text-align: center;
			}
			.toBarBtm{
				height: 75rpx;
				line-height: 75rpx;
				color: #999999;
				.left {
					float: left;
				}
				.right {
					float: right;
				}
			}
		}
		.list{
			.listItem{
				padding: 15px 0;
				border-bottom: 1px solid #eee;
				.checkItem{
					width: 7%!important;
					height:auto;
					padding-top: 10px;
				}
				.icon{
					width: 13%!important;
					height:auto;
					.iconBox{
						width: 40px;
						height: 40px;
						line-height: 40px;
						text-align: center;
						font-size: 24px;
						border-radius: 50%;
						color: #fff;
						// background-color: #F8A41D;
					}
				}
				.content{
					width: 50%!important;
					height:auto;
					color: #666;
					font-size: 16px;
					.conTitle{
						color: #333333;
						font-weight: 600;
						font-size: 18px;
					}
					.conSubTitle{
						color: #666;
						font-size: 18px;
					}
				}
				.price{
					width:30%!important;
					height:auto;
					font-size: 16px;
					color: #333;
					font-weight: bold;
				}
			}
		}
		.btmBarAccount{
			width: 100%;
			height: 80rpx;
			line-height: 80rpx;
			position: fixed;
			left: 0;
			bottom: 90rpx;
			padding-left: 10px;
			.account{
				padding-left: 10px;
				font-weight: bold;
			}
		}
		.btmBarNav{
			width: 100%;
			height: 90rpx;
			line-height: 90rpx;
			font-size: 16px;
			position: fixed;
			left:0;
			bottom: 0;
			background-color: #ffffff;
			text-align: center;
			.uni-grid-item{
				width: 30%!important;
			}
			.uni-grid-item:nth-of-type(1){
				width: 10%!important;
			}
			.uni-grid-item:nth-of-type(4){
				background-color: #F8A41D;
				color: #FFFFFF;
			}
		}
		.popupCon{
			background-color: #FFFFFF;
			width: 100%;
			height: 50vh;
			.popupList{
				width: 100%;
				@include divH(120rpx);
				text-align: center;
				border-bottom: 1px solid #F1F1F1;
				font-size: 18px;;
				.icon{color: #9FDB61;}
				.text{
					padding-left: 12px;;
				}
			}
		}
		.popupClose{
			width: 100%;
			@include divH(90rpx);
			position: fixed;
			left:0;
			bottom: 0;
			text-align: center;
			border-top: 1px solid #F1F1F1;
			.close{
				padding-right: 12px;
			}
		}
	}
</style>
